<script>
/*
* 复制的a-steps，用法一样。修改了当current不是当前项时，点整个step会触发@change的行为，修改成了只有点index和title才会触发@change行为
*
* */
export default {
    components: {},
    props: {
        current: {
            type: Number
        }
    },
    data() {
        return {
            hoverIndex: false
        }
    },
    watch: {
        current() {
            this.hoverIndex = -1
            // this.$emit('change', this.current)
        }
    },
    mounted: function() {
    },
    methods: {
        hover(index) {
            if (this.current !== index)
                this.hoverIndex = index
        }
    },
    render(createElement, context) {
        return (
            <div class="ant-steps ant-steps-vertical">
                {
                    this.$slots.default.map((item, index) => {
                        let antStepClass = 'ant-steps-item '
                        if (index === this.current) {
                            antStepClass += 'ant-steps-item-process'
                        } else {
                            antStepClass += ' ant-steps-item-wait'
                        }
                        let itemIconClass = 'ant-steps-item-icon '
                        let itemTitleClass = 'ant-steps-item-title '
                        if (this.hoverIndex === index) {
                            itemIconClass += 'hover'
                            itemTitleClass += 'hover'
                        }
                        return (
                            <div class={antStepClass}>
                                <div class="ant-steps-item-container">
                                    <div class="ant-steps-item-tail" />
                                    <div class={itemIconClass}
                                         onMouseenter={e => this.hover(index)}
                                         onMouseleave={e => this.hover(-1)}
                                         onClick={e => this.$emit('change', index)}
                                    >
                                        <span class="ant-steps-icon">{index + 1}</span>
                                    </div>
                                    <div class="ant-steps-item-content">
                                        <div class={itemTitleClass}
                                             onMouseenter={e => this.hover(index)}
                                             onMouseleave={e => this.hover(-1)}
                                             onClick={e => this.$emit('change', index)}
                                        >
                                            {item.componentOptions.propsData.title}
                                        </div>
                                        <div class="ant-steps-item-description">
                                            {item.componentOptions.children}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        )

    }
}
</script>
<style lang="less">

.ant-steps-item-process .ant-steps-item-title {
    color: black !important;
}

.ant-steps-item-icon {
    transition: all .3s;

    &.hover {
        cursor: pointer;
        border-color: #1890FF !important;
        color: #1890FF !important;

        .ant-steps-icon {
            color: #1890FF !important;
        }
    }
}

.ant-steps-item-title {
    transition: all .3s;

    &.hover {
        cursor: pointer;
        color: #1890FF !important;
    }
}
</style>